<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定样式</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

    <!--
       v-for指令:
        1.用于展示列表数据
        2.语法:v-for="(item,index)in xxx" :key="yyy"
        3.可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)
     -->
    <div id="app">
      <!-- 遍历数组 -->
      <ul>
        <li v-for="(stu,index) in list" ::key="stu.id">
            {{stu.Name}}--{{stu.Age}}--{{stu.Sex}}--{{stu.Address}}
        </li>
      </ul>

       <!-- 遍历对象  -->
       <ul>
        <li v-for="(value,k) in apo" ::key="k">
            {{k}}--{{value}}
      </ul>

       <!-- 遍历字符串 -->
       <ul>
        <li v-for="(stu,index) in Name" ::key="index">
            {{stu}}--{{index}}
        </li>
      </ul>

      <!-- 遍历指定次数 -->
      <ul>
        <li v-for="(stu,index) in 5" ::key="index">
            {{stu}}--{{index}}
        </li>
      </ul>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list:[
                {id:1,Name:"张三",Age:18,Sex:"男",Address:"北京"},
                {id:2,Name:"李四",Age:19,Sex:"女",Address:"上海"},
                {id:3,Name:"王五",Age:20,Sex:"男",Address:"广州"},
                {id:4,Name:"赵六",Age:21,Sex:"女",Address:"深圳"},
                {id:5,Name:"田七",Age:22,Sex:"男",Address:"杭州"}
            ],
            apo:{
               id:3,
               Name:"王五",
               Age:20,
               Sex:"男",
               Address:"广州"
            },
            Name:"wodasdada"
        },
        methods:{
         
        }
    })
</script>
</html>